<script setup lang="ts">
	defineProps<{
		title : string,
		price : string,
		pic : string,
		badge ?: string,
		soldout ?: boolean,
		ssr ?: boolean,
		type ?: string,
		final ?: boolean,
		bottomText ?: string,
		percent ?: string,
		stock ?: string,
		count ?: string,
		emits : ['click']
	}>()
</script>

<template>
	<view class="product-item">
		<view v-if="badge" class="badge">
			<text>{{ badge }}</text>
		</view>


		<view class="img-wrapper" @click="$emit('click')">
			<view v-if="type" class="ssr-badge">
				<text>{{ type }}</text>
			</view>
			<image class="product-img" :src="pic" mode="widthFix" />
			<view v-if="soldout" class="soldout-mask"></view>
			<view v-if="final" class="final-mask"></view>
			<text v-if="bottomText" class="bottom-text">{{ bottomText }}</text>
			<text class="title">{{ title }}</text>
			<view v-if="count" style="display: flex;justify-content: space-between;">
				<text class="price">{{ percent?percent: price }}</text>
				<text class="price">{{ stock +"/"+count}}</text>
			</view>
			<text class="price" v-else><text style="font-size: 20rpx;">¥</text>{{ percent?percent: price }}</text>
		</view>
	</view>
</template>

<style scoped>
	.product-item {
		width: 100%;
		font-size: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
		position: relative;
	}

	.product-item .ssr-badge {
		position: absolute;
		top: 10px;
		left: 8px;
		width: 46.34px;
		height: 16.8px;
		border-radius: 4px;
		background: linear-gradient(90deg, #FDE29B 0%, #FFFFD0 100%);
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: white;
		font-size: 12px;
		z-index: 0;
		color: white;
	}

	.product-item .badge {
		position: absolute;
		top: 8px;
		width: 46.34px;
		height: 16.8px;
		background-image: url('~@/static/product-item-badge-bg.png');
		background-repeat: no-repeat;
		background-size: contain;
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: white;
		font-size: 12px;
		z-index: 1;
	}

	.product-item .img-wrapper {
		width: 336rpx;
		height: 452rpx;
		padding: 24rpx;
		background-image: url('~@/static/owo/product-item-bg1.png');
		background-repeat: no-repeat;
		background-size: cover;
		box-sizing: border-box;
		/* height: 110px; */
		/* width: 110px; */
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.product-item .product-img {
		width: 95%;
		/* width: 92px; */
		/* height: 92px; */
	}

	.product-item .soldout-mask {
		background-image: url('~@/static/owo/product-item-soldout.png');
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
	}

	.product-item .final-mask {
		background-image: url('~@/static/owo/product-item-soldout.png');
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.product-item .title {
		width: 100%;
		font-size: 24rpx;
		font-weight: 400;
		color: white;
		text-align: left;
		overflow: hidden;
		line-height: 34px;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.product-item .price {
		font-size: 36rpx;
		font-weight: 700;
		line-height: 1;
		color: rgba(255, 255, 255, 1);
		text-align: left;
		font-weight: bold;
		vertical-align: top;
		display: inline-block;
		width: 100%;
	}

	.bottom-text {
		color: white;
		position: absolute;
		bottom: 8px;
		left: 8px;
		right: 8px;
		background-color: rgba(0, 0, 0, 0.6);
		height: 18px;
		box-sizing: border-box;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 9px;
		z-index: 0;
	}
</style>